<template>
  <div :class="['play-video-box',{'show':show}]">
    <div class="returnbutton" @click.stop="hidevideo">
      <i class="iconfont icon-zuo"></i>
    </div>

    <div class="main-play-video-box">
      <div class="pause" v-show="!play">
        <i class="iconfont icon-bofang"></i>
      </div>
      <van-slider v-model="value" active-color="#757374" @change="sliderchange" inactive-color="#353132">
        <template #button>
          <div class="custom-button"></div>
        </template>
      </van-slider>
      <div class="iconcontrolbox">
        <div class="iconcontrolminbox">
          <i class="iconfont icon-dianzan1"></i>
          <div>{{detail.praisedCount|playcount}}</div>
        </div>
        <div class="iconcontrolminbox" @click.stop="showvideocomment">
          <i class="iconfont icon-pinglun1"></i>
          <div>{{detail.subscribeCount|playcount}}</div>
        </div>
        <div class="iconcontrolminbox">
          <i class="iconfont icon-fenxiangzhuanfa"></i>
          <div>{{detail.shareCount|playcount}}</div>
        </div>
      </div>
      <div class="videofacebox">
        <div class="topbox">
          <div class="imgbox" v-if="detail.creator">
            <img :src="detail.creator.avatarUrl" alt />
          </div>
          <div class="namebox" v-if="detail.creator">{{detail.creator.nickname}}</div>
        </div>
        <div class="bottombox">
          <div>{{detail.title}}</div>
        </div>
      </div>
      <video autoplay @pause="pause" @play="playFun" ref="videocontrol" @click.stop="changeplay" :src="url"></video>
    </div>
    <video-comment :show="videocommentshow" :cid="prop" @hidevideocommentson="hidevideocomment"></video-comment>
  </div>
</template>

<script>
import videoComment from "./videocomment.vue";
import { getVideoDetail } from "../assets/api/video.js";
import { getVideoUrl } from "../assets/api/video.js";
export default {
  props: ["show", "prop"],
  data() {
    return {
      videocommentshow: false,
      value: 0,
      play: true,
      playInterval: null,
      url: "",
      detail: {},
    };
  },
  methods: {
    showvideocomment() {
      this.videocommentshow = true;
      
      this.$refs.videocontrol.pause();
    },
    hidevideocomment() {
      this.videocommentshow = false;
      this.$refs.videocontrol.play();
    },
    hidevideo() {
      this.$emit("hidevideoson");
      this.$refs.videocontrol.pause();
    },
    changeplay() {
      this.play = !this.play;
      if (this.play == false) {
        this.$refs.videocontrol.pause();
      } else {
        this.$refs.videocontrol.play();
      }
    },
    pause() {
        this.play=false;
      clearInterval(this.playInterval);
      console.log(this.value);
      if (this.value >= 99) {
        this.$refs.videocontrol.play();
      }
    },
    playFun() {
        this.play=true;
      // 实时控制进度条
      let vedio = this.$refs.videocontrol;
      this.playInterval = setInterval(() => {
        // 计算滚动条值
        this.value = (vedio.currentTime / vedio.duration) * 100;
      }, 999);
    },
    sliderchange() {
      let video = this.$refs.videocontrol;
      video.currentTime = (video.duration * this.value) / 100;
    },
  },
  watch: {
    prop(newV) {
      getVideoDetail({ id: newV }).then((data) => {
        this.detail = data.data;
      });
      getVideoUrl({ id: newV }).then((data) => {
        console.log(data);
        this.url = data.urls[0].url;
        console.log(this.url);
      });
    },
    show(newV, oldV) {
      if (oldV == false && newV == true) {
        this.$refs.videocontrol.play();
      }
    },
  },
  filters: {
    playcount(v) {
      return v > 10000 ? (v / 10000).toFixed(1) + "万" : v;
    },
  },
  components: {
    videoComment,
  },
};
</script>

<style lang="less">
.play-video-box {
  width: 100%;
  height: 100%;
  overflow: scroll;
  position: fixed;
  transition: all 0.3s ease-in-out;
  left: 100%;
  top: 0;
  z-index: 400;
  &.show {
    left: 0;
  }
  .returnbutton {
    z-index: 400;
    color: white;
    position: absolute;
    left: 24px;
    top: 30px;
    i {
      font-size: 22px;
    }
  }
  .iconcontrolbox {
    z-index: 100;
    color: white;
    position: absolute;
    display: flex;
    flex-direction: column;
    right: 16px;
    bottom: 100px;
    align-items: center;
    .iconcontrolminbox {
      text-align: center;
      margin-bottom: 24px;
    }
    i {
      font-size: 28px;
      width: 28px;
      height: 28px;
    }
  }
  .main-play-video-box {
    background-color: black;
    width: 100%;
    display: flex;
    height: 100%;
    .pause {
      position: absolute;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 42px;
      height: 42px;
      i {
        font-size: 42px;
        color: rgba(255, 255, 255, 0.5);
      }
    }
    .van-slider {
      z-index: 100;
      position: absolute;
      width: 100%;
      bottom: 78px;
      .custom-button {
        width: 8px;
        height: 8px;
        color: #fff;
        font-size: 10px;
        line-height: 18px;
        text-align: center;
        background-color: white;
        border-radius: 50%;
      }
    }
    video {
      width: 100%;
    }
  }
  .videofacebox {
    position: absolute;
    color: white;
    font-size: 18px;
    left: 15px;
    bottom: 150px;

    .topbox {
      display: flex;
      align-items: center;
      .imgbox {
        margin-right: 8px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
    .bottombox {
      font-size: 16px;
      margin-top: 10px;
    }
  }
}
</style>